<template>
    <div class="kongcheng">
        <div class="kongcheng-logo">
            <LoadingComponent v-slot="{loadingFlag}">
                <img src="/img/空乘.dbce705d.png" v-if="loadingFlag">
            </LoadingComponent>
        </div>
        <div class="kongcheng-postion">
            <span>当前位置 : </span>
            <router-link to="/HomeOne" show-a>首页</router-link>
            <span  class="icon">></span>
            <a href="javascript:;">空乘专业 </a>
        </div>
        <div class="kongcheng-content">
            <ul v-for="item in contents" :key="item.id">
                <li class="kc-c-title">
                    <LoadingComponent v-slot="{loadingFlag}" >
                        <img :src="item.titlesrc" v-if="loadingFlag">
                    </LoadingComponent>
                </li>
                <div class="kc-c-c">
                    <li class="kc-c-logo">
                        <LoadingComponent v-slot="{loadingFlag}" class="kc-c-logo">
                            <img :src="item.logosrc" v-if="loadingFlag">
                        </LoadingComponent>
                    </li>
                    <div class="kc-c-con-lists" v-for="(ites,inds) in item.texts" :key="item
                    .id+inds">
                        <div class="kc-c-con-lists-le">
                            <LoadingComponent v-slot="{loadingFlag}">
                                <img :src="subSrc?.[inds]" v-if="loadingFlag">
                            </LoadingComponent>
                        </div>
                        <div class="kc-c-con-lists-ri">
                            <p for-title :style="{
                                color:subSrcCo?.[inds]
                            }" v-if="ites.title"><span>{{ ites.title }}</span></p>
                            <p for-item>
                                <span v-for="(lis,indes) in ites.conts" :key="indes">
                                    <i v-if="ites.conts?.length>1">
                                        {{`（${indes+1}）`}}
                                    </i>{{ lis }}
                                </span>
                            </p>
                        </div>
                    </div>
                </div>
            </ul>
        </div>
        <div class="kongcheng-bmlc">
            <LoadingComponent v-slot="{loadingFlag}">
                <img src="/img/报名条件.7c214866.jpg" v-if="loadingFlag">
            </LoadingComponent>
            <div class="kongcheng-bmlc-pos">
                <a href="https://p.qiao.baidu.com/cps/chat?siteId=17865090&userId=39789408&siteToken=1592882751da134d1450a7e08b16ffcb" class="pos left"></a>
                <router-link to="/zaixianbaoming" class="pos right" router-link></router-link>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
    import {ref} from 'vue';
    var subSrc:object=ref<Array<string>>([
        '/img/航空专业详情页_03.61438cb9.png','/img/航空专业详情页_06.f97a27f4.png','/img/',
    ])
    var subSrcCo:object=ref<Array<string>>([
        '#f30','#069',''
    ])
    var contents:object|any=ref<Array<object> |any>([
        {
            titlesrc:'/img/专业介绍_03.b658540e.jpg',
            logosrc:'/img/空乘专业_03.177b2716.jpg',
            id:1,
            done:false,
            texts:[
                {
                    title:'',
                    conts:[' 空乘专业是培养适应21世纪民航运输事业发展，具有坚实的英语基础、突出英语应用能力， 较高的人文素质，受过专门航空运输技能知识训练的实用型民航高级空中乘务员。 ']
                },
                {
                    title:'',
                    conts:[' 表现为气质佳、形体美、才艺精、纪律严的知识型、技能型航空服务专门人才。 采用"订单式"的培养模式，为厦门航空、南方航空等培养国际、国内空乘及地勤服务人员。 ']
                },
            ]
        },{
            titlesrc:'/img/专业优势_03.14b8a804.jpg',
            logosrc:'/img/空乘专业_06.95b29a5b.jpg',
            id:2,
            done:false,
            texts:[
                {
                    title:'',
                    conts:[' 工作环境相对单纯，机组每班换，不存在办公室的尔虞我诈。 机组成员不是固定的，所以每天的同事都不一样，大家都是泛泛之交，也没有什么利益冲突。 ']
                },
                {
                    title:'',
                    conts:['小时费水平比较小康 尤其是三大航、海航、厦航，待遇真的还都是不错的。飞个大半年，小时费可以达到8000+。4年后可以考乘务长、教员，小时费1W5+是没有问题的。 ']
                },
            ]
        },{
            titlesrc:'/img/职业规划_03.e9225f9b.jpg',
            logosrc:'/img/高中生晋升.87fec1fe.png',
            id:3,
            done:true,
            texts:[
                {
                    title:'在校期间：',
                    conts:['认真学习好专业知识，掌握英语、日语  基本交流能力，全面掌握本领，提高计算机操  作能力。 ','拿到相关的技能证书。获得英语专业四  级证书，涉外秘书等级证，导游证等。 ','积极参加校内外组织的活动，增大自己的交际面。积极参与班级学校活动争取入党。 ','关注相关的就业政策和就业动态。 ','不断参加各个航空公司的招聘面试。 ']
                },
                {
                    title:'大学毕业的五年：',
                    conts:['找到一份稳定且有一定经济收入和一定  挑战的工作，最好是能够圆自己的空姐梦。 ','在工作中不断学习，掌握技能，改善家  庭经济状况，具备一定经济独立能力 航空工  作是一份服务性的工作，需要较高的服务意  识和良好的服务态度而这些正是我的优势所  识和良好的服务态度而这些正是我的优势所  想。 ']
                },
            ]
        }
    ]);
    // function 
</script>
<style scoped>
.kongcheng-bmlc-pos{
    position:absolute;
    bottom: 0;
    left:50%;
    width:75%;
    display: flex;
    justify-content: space-around;
    transform: translateX(-50%);
}
.kongcheng-bmlc-pos a{
    width:38%;
    display: block;
    height:2rem;
}
.kongcheng-bmlc{
    width:100%;
    position:relative;
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.kongcheng-bmlc .ys-load-component{
    width:100%;
    min-height: 4rem;
}
.kongcheng-bmlc .ys-load-component img{
    width:100%;
}
.kc-c-con-lists{
    width:100%;
    margin-top: 15px;
    border-bottom: 0.05px dotted #999;
    padding:0.6rem 0;
    display: flex;
    justify-content: space-between;
    font-size: 0.55rem;
}
.kc-c-con-lists-ri{
    width:75%;
}
.kc-c-con-lists-ri p[for-title]{
    margin-bottom: 0.1rem;
}
.kc-c-con-lists-ri p[for-item]{
    display: flex;
    flex-direction: column;
    color: #666;
}
.kc-c-con-lists-le{
    width:20%;
}
.kc-c-con-lists-le img{
    width:100%;
}
.kongcheng-content{
    width:100%;
    margin-top: 10px;
    padding-bottom: 1rem;
}
.kongcheng-content>ul{
    width:95%;
    margin:15px auto 0;
}
.kongcheng-content .kc-c-c{
    width:95%;
    margin:10px auto 0;
}
.kongcheng-content ul .kc-c-title{
    width:100%;
}
.kongcheng-content ul li img{
    width:100%;
}
.kongcheng-content ul .kc-c-logo{
    margin-top: 10px;
    min-height: 3rem;
}
.kongcheng {
    width: 15rem;
    height: auto;
    overflow: hidden;
}
.kongcheng-logo{
    width:100%;
    height:auto;
    min-height: 3rem;
}
.kongcheng-logo img{
    width:100%;
}
a{
    text-decoration: none;
    color: #000;
}
.kongcheng-postion{
    padding:0.5rem 1rem;
    box-sizing: border-box;
    font-size: 0.62rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.kongcheng-postion .icon{
    margin:0 0.15rem;
}
.kongcheng-postion a[show-a]{
    margin-left: 0.3rem;
}
.kongcheng-postion a[show-a]:active{
    color: blue;
    text-decoration: underline;
}
</style>